<template>
  <div>
    <h1>父组件内容</h1>
    父组件显示:{{msg}}<br>
    父组件显示2:{{msg2}}
    <!--3.第三步：把父组件的某一个属性传递给子组件-->
    <Child
      :data='msg'
      :data2='msg2'
      @changeMsg='change'
    ></Child>
  </div>
</template>

<script>
// @指定的是src路径
import Child from '@/components/test/child'   // 1.第一步：在父组件中导入子组件
export default {
  // 2.第二步：父组件中注册子组件
  components: {
    Child
  },
  data() {
    return {
      msg: '父组件的信息',
      msg2: '222222222222222222'
    }
  },
  methods: {
        //3.在父组件中定义一个change方法，可以在子组件中触发并传值给父组件
        change(data) {
        // data接收是子组件中传递的数据
        // debugger
        // alert('调用了父组件的方法, 接收到信息:'+data)
        this.msg = data  // 更新父组件的内容
        }
  }
}
</script>